<template>
  <div class='login-panel'>
    <h1 class='title'>后台管理系统</h1>
    <div class='tabs'>
      <el-tabs type='border-card' stretch v-model='activeName'>
        <el-tab-pane label='账号登陆' name='login'>
          <template #label>
            <div class='label'>
              <el-icon>
                <User />
              </el-icon>
              <span class='text'>登陆</span>
            </div>
          </template>
          <pane-account ref='accountRef'></pane-account>
        </el-tab-pane>
        <el-tab-pane label='手机登录' name='phoneLogin'>
          <template #label>
            <div class='label'>
              <el-icon>
                <Iphone />
              </el-icon>
              <span class='text'>手机登录（无法使用）</span>
            </div>
          </template>
          <pane-phone></pane-phone>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class='controls'>
      <el-checkbox v-model='isRememberPwd' label='记住密码' size='large' />
      <el-link type='primary'>忘记密码</el-link>
    </div>
    <el-button class='login-btn' type='primary' size='large' @click='loginFn'>
      立即登录
    </el-button>
  </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue'
import PaneAccount from './pane-account.vue'
import PanePhone from './pane-phone.vue'
import { localCache } from '@/utils/storage'
import { ISREMEMBERPWD } from '@/global/constants'

const isRememberPwd = ref<boolean>(
  localCache.getStorage(ISREMEMBERPWD) ?? false
)

const activeName = ref('login')
const accountRef = ref<InstanceType<typeof PaneAccount>>()

watch(isRememberPwd, (newVal) => {
  if (newVal) {
    localCache.setStorage(ISREMEMBERPWD, newVal)
  } else {
    localCache.removeStorage(ISREMEMBERPWD)
  }
})

const loginFn = () => {
  if (activeName.value === 'login') {
    accountRef.value?.loginAction(isRememberPwd.value)
  } else if (activeName.value === 'phoneLogin') {
    console.log('phone')
  }
}
</script>

<style scoped lang='less'>
.login-panel {
  margin-bottom: 15px;
  width: 330px;

  .title {
    text-align: center;
    margin-bottom: 15px;
  }

  .controls {
    display: flex;
    margin-top: 12px;

    justify-content: space-between;
  }

  .login-btn {
    margin-top: 10px;
    width: 100%;
  }

  .label {
    display: flex;
    align-items: center;
    justify-content: center;

    .text {
      margin-left: 5px;
    }
  }
}
</style>
